import { Resizable } from "react-resizable";
import type { ResizeCallbackData } from "react-resizable";
import styles from './ResizeTable.less';

interface TitlePropsType {
    width: number;
    onResize: (
        e: React.SyntheticEvent<Element>,
        data: ResizeCallbackData
    ) => void;
}

const ResizableTitle: React.FC<
    Readonly<React.HTMLAttributes<any> & TitlePropsType>
> = (props) => {
    const { onResize, width, ...restProps } = props;

    if (!width) {
        return <th {...restProps} />;
    }

    return (
        <Resizable
            width={width}
            height={0}
            handle={
                <span
                    className={styles.reactResizableHandle}
                    onClick={(e) => e.stopPropagation()}
                />
            }
            onResize={onResize}
            draggableOpts={{ enableUserSelectHack: false }}
        >
            <th {...restProps} />
        </Resizable>
    );
};

export default ResizableTitle;